<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="../libs/vue/2.6.11/vue.min.js"></script>
    <script src="../libs/axios/0.20.0-0/axios.min.js"></script>
    <script src="../../axios_config.js"></script>
</head>
<body>
<div id="app">
    <label>添加：</label><input type="text" v-on:keydown.13="add" ref="text_input"></input>
    <ul>
        <li v-for="item in items">
            <h3>{{item.title}}</h3>
            <p>{{item.description}}</p>
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: []
        }, mounted: function () {
            var $this = this;
            axios.post('data/query',
                {"test": 1},
                {
                    headers: {"test": "te"}
                }).then(function (response) {
                console.log(response)
                $this.items = response.data;
            }).catch(function (error) {
                console.log(error);
            });
        },
        methods: {
            add: function (event) {
                var name = this.$refs.text_input.value;
                this.items.push({title: name, description: '快使用双节棍，哼哼哈嘿'})
            }
        }
    });
</script>
</body>
</html>